<template>
  <view class="b-lession-row ui-flex flex--column" @click="handleClickGotoLessonDetail(lessonId)">
    <view class="lesson-container ui-flex">
      <view class="lession-image">
        <image class="lession-image--image" :src="lessonPicPath" />
      </view>
      <view class="lesson-info">
        <!-- 课程名称 -->
        <view class="lesson-info--name ui-ellipsis--l3">{{lessonName}}</view>
        <!-- 课程名称 -->
        <view class="lesson-info--main ui-flex flex--space-between">
          <view class="lesson-info--teacher">
            <view class="lesson-info--teacher-image">
              <image class="lesson-info--teacher-image--image" :src="lecturePic" alt="人数" />
            </view>
            <text class="lesson-info--teacher-name">{{lecturerName}}</text>
          </view>
          <!-- 课程节数 -->
          <text class="lesson-info--jieshu">{{ subNum }}节</text>
        </view>
      </view>
    </view>
    <view class="lesson-footer ui-flex flex--spaace-between">
      <text class="ui-txt txt-caption-sm">{{ clickNum }}人已学习</text>
      <view class="ui-txt txt-primary">
        <text v-if="lessonPrice">{{ lessonPrice | currency_format }}</text>
        <text v-else>免费</text>
        <template v-if="isVipLesson === 'Y'">
          <text
            v-if="lessonCheapPrice"
            style="margin-left:8px;"
          >VIP:{{ lessonCheapPrice | currency_format }}</text>
          <text v-else style="margin-left:8px;">VIP:免费</text>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import lessonMixins from "./mixins";

export default {
  name: "lessionSearchComponent",
  mixins: [lessonMixins],
  props: {
    lecturePic: String,
    lecturerName: String,
    subNum: Number,
    isVipLesson: String
  },
  data() {
    return {};
  },
  created() {},
  mounted() {},
  methods: {}
};
</script>

<style scoped lang="scss">
$lession-width: 330upx;
.b-lession-row {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  padding: 0 30rpx;
  .lesson-container,
  .lesson-footer {
    width: 100%;
  }
  .lesson-container {
    flex: 0 0 162rpx;
  }
  .lession-image {
    flex: 0 0 288rpx;
    width: 288rpx;
    height: 162rpx;
    border-radius: 8upx;

    .lession-image--image {
      width: 288rpx;
      height: 162rpx;
      border-radius: 8upx;
    }
  }
  .lesson-info {
    flex: 1;
    padding-left: 23rpx;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 0;
    height: 162rpx;
    .lesson-info--name {
      flex: 1;
      font-size: 32rpx;
      color: #2c2c35;
      line-height: 1;
    }

    .lesson-info--main {
      flex: 0 0 52rpx;
      display: flex;
      align-items: center;
      flex-direction: row;
      margin-top: 8rpx;
    }
    .lesson-info--teacher {
      flex: 0 0 1;
      display: flex;
      flex-direction: row;
      align-items: center;
      font-size: 24rpx;
      .lesson-info--teacher-image {
        vertical-align: middle;
        display: inline-block;
        width: 36rpx;
        height: 36rpx;
        border-radius: 50%;
        text-align: right;
        background-color: #aeafc0;
        .lesson-info--teacher-image--image {
          width: 100%;
          border-radius: 50%;
          height: 100%;
        }
      }
      .lesson-info--teacher-name {
        color: #2c2c35;
        display: inline-block;
        margin-left: 7rpx;
      }
    }
    .lesson-info--jieshu {
      flex: 0 0 1;
      color: #aeafc0;
      margin-left: 40rpx;
      font-size: 22rpx;
    }
  }
  .lesson-footer {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 2rpx;
    font-size: 22rpx;
    padding: 32rpx 0;
    .xuexi {
      color: #aeafc0;
    }
    .price {
      color: #f54305;
      font-size: 24rpx;
    }
  }
}
</style>
